<template>
  <div class="find">
    <van-nav-bar title="首页" fixed placeholder />
    <van-search
      v-model="value"
      background="#4fc08d"
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @input="onInput"
    />
    <!-- 搜索下容器 -->
    <div class="search_wrap">
      <!-- 标题 -->
      <p class="hot_title" v-if="songList.length == 0">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap" v-if="songList.length == 0">
        <!-- 每个搜索关键词 -->
        <span
          class="hot_item"
          v-for="(item, index) in hotList"
          :key="index"
          @click="hotClick(item.first)"
          >{{ item.first }}</span
        >
      </div>
      <!-- 搜索结果 -->
      <div class="search_wrap" v-else>
        <!-- 标题 -->
        <p class="hot_title">最佳匹配</p>
        <van-cell
          v-for="item in songList"
          :key="item.id"
          :title="item.name"
          size="large"
          :label="item.al.name"
          @click="$router.push({ path: '/play', query: { id: item.id } })"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon
              name="play-circle-o"
              size="35"
              color="#09f"
              class="search-icon"
            />
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "find",
  data() {
    return {
      value: "", // 搜索关键词
      songList: [],
      hotList: []
    };
  },
  methods: {
    hotClick(val) {
      this.value = val;
      this.onSearch();
    },
    onSearch() {
      this.$axios({
        url: "/cloudsearch",
        method: "get",
        params: { keywords: this.value }
      }).then(res => {
        //成功回调
        this.songList = res.data.result.songs;
      });
    },
    onInput() {
      if (this.value.length == 0) {
        this.songList = [];
      }
    }
  },
  created() {
    this.$axios({
      url: "/search/hot",
      method: "get"
    }).then(res => {
      //成功回调
      // console.log(res);
      this.hotList = res.data.result.hots;
    });
  }
};
</script>

<style scoped lang="less">
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 32px;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 0 14px;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

/* 给单元格设置底部边框 */
.van-cell {
  border-bottom: 1px solid lightgray;
}
.find .play-icon {
  font-size: 30px;
  color: gray;
}
.find {
  .van-cell__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
